<div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">


  <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" *ngIf="type == 1">
    <nz-form-item>
      <nz-form-label [nzSpan]="8">开始时间</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <app-my-date-picker [dateTimeType]="startDateTimeType" [date]="startDateTime" [dateFormat]="'yyyy-MM-dd'"
                            (event)="outDateTime($event)"></app-my-date-picker>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" [ngClass]="!isMobile?'margin-left':''" *ngIf="type == 1">
    <nz-form-item>
      <nz-form-label [nzSpan]="8">结束时间</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <app-my-date-picker [dateTimeType]="endDateTimeType" [date]="endDateTime" [dateFormat]="'yyyy-MM-dd'"
                            (event)="outDateTime($event)"></app-my-date-picker>
      </nz-form-control>
    </nz-form-item>
  </div>

  <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" [ngClass]="!isMobile?'margin-left':''" *ngIf="type == 2">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">开始月份</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <nz-month-picker style="width: 100%"
                           [(ngModel)]="startDateTime"
                           [ngModelOptions]="{standalone: true}"
                           (ngModelChange)="onStartMonth($event)"
                           nzPlaceHolder="选择日期"
                           nzFormat="yyyy-MM">
          </nz-month-picker>
        </nz-form-control>
      </nz-form-item>
  </div>

  <div  class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6" [ngClass]="!isMobile?'margin-left':''" *ngIf="type == 2">
    <nz-form-item *ngIf="type == 2">
      <nz-form-label  [nzSpan]="8">结束月份</nz-form-label>
      <nz-form-control [nzSpan]="16">
        <nz-month-picker
          style="width: 100%"
          [(ngModel)]="endDateTime"
          [ngModelOptions]="{standalone: true}"
          (ngModelChange)="onEndMonth($event)"
          nzPlaceHolder="选择日期"
          nzFormat="yyyy-MM">
        </nz-month-picker>
      </nz-form-control>
    </nz-form-item>
  </div>



  <div class="item" nz-col nzXs="0" nzSm="0" nzMd="0" nzLg="1" nzXl="5">

  </div>

  <div class="item margin-bottom" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="7"
       nzXl="6">
    <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton">
      <input type="text" nz-input placeholder="管理账号/场地" [(ngModel)]="pageHelper.keyword"/>
    </nz-input-group>
    <ng-template #suffixIconButton>
      <button nz-button nzType="primary" nzSearch (click)="search()"><i nz-icon nzType="search"></i></button>
    </ng-template>
  </div>
</div>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">

  <div class="margin-bottom" [ngClass]="isMobile?'item-mobile':''" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="8">
    <button class="margin-right" (click)="dayMethod()" nz-button [nzType]="day">
      <i nz-icon nzType="bar-chart" nzTheme="outline"></i>
      <span *ngIf="!isMobile">日交易数据</span>
    </button>

    <button nz-button [nzType]="month" (click)="monthMethod()">
      <i nz-icon nzType="rise" nzTheme="outline"></i><span *ngIf="!isMobile">月交易数据</span>
    </button>
  </div>

  <nz-table #expandTable nzBordered [nzData]="listOfData" nzTableLayout="fixed" [nzScroll]="{ x: '1300' }">
    <thead>
    <tr>
      <th nzWidth="260px">合作伙伴名称</th>
      <th nzWidth="130px">营业额（元）</th>
      <th nzWidth="150px">线上营业额（元）</th>
      <th nzWidth="150px">线下营业额（元）</th>
      <th nzWidth="130px">订单笔数</th>
      <th nzWidth="130px">线上订单笔数</th>
      <th nzWidth="130px">线下订单笔数</th>
      <th nzWidth="130px">分润（元）</th>
      <th nzWidth="150px">活跃场地数量（个）</th>
      <th nzWidth="130px">新增场地（个）</th>
      <th nzWidth="130px">日期</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of expandTable.data">
      <ng-container *ngFor="let item of mapOfExpandedData[data.key]">
        <tr *ngIf="(item.parent && item.parent.expand) || !item.parent">
          <td nzEllipsis
              [nzIndentSize]="item.level! * 20"
              [nzShowExpand]="!!item.children"
              [(nzExpand)]="item.expand"
              (nzExpandChange)="baseService.zorro.collapse(mapOfExpandedData[data.key], item, $event)"
          >
          {{item.agencyName}}</td>
          <td nzEllipsis>{{item.turnover}}</td>
          <td nzEllipsis>{{item.turnoverOnLine | emptyCheckPipe:2}}</td>
          <td nzEllipsis>{{item.turnoverOffline | emptyCheckPipe:2}}</td>
          <td nzEllipsis>{{item.orderCount}}</td>
          <td nzEllipsis>{{item.orderCountOnLine | emptyCheckPipe:1}}</td>
          <td nzEllipsis>{{item.orderCountOffline | emptyCheckPipe:1}}</td>
          <td nzEllipsis><span>{{item.totalCommission}}</span></td>
          <td nzEllipsis nzWidth="15%">{{item.storeActiveNum}}</td>
          <td nzEllipsis nzWidth="15%">{{item.storeNewNum}}</td>
          <td nzEllipsis> {{item.dateStr}}</td>
        </tr>
      </ng-container>
    </ng-container>
    </tbody>
  </nz-table>
</div>
